<template>
  <view class="container">
    <view class="info-content">
      <ve-card
        :customContentStyle="{
          padding: '0rpx 32rpx 20rpx',
        }"
        type="none"
      >
        <ve-cell label="车牌号">{{ channelSyncDetail.licenseNo }}</ve-cell>
        <ve-cell label="同步类型">{{ channelSyncDetail.statusName }}</ve-cell>
        <ve-cell label="服务类型">{{ channelSyncDetail.useTypeName }}</ve-cell>
        <ve-cell label="订单来源">{{ channelSyncDetail.refChannelTypeName || channelSyncDetail.refOrderSourceName }}</ve-cell>
        <ve-cell label="自有单号">{{ channelSyncDetail.refCode }}</ve-cell>
        <ve-cell label="渠道单号" v-if="channelSyncDetail.refOrderSource == 2">{{ channelSyncDetail.refCodeChannel }}</ve-cell>
        <ve-cell label="库存周期"> {{ channelSyncDetail.fromTime }}至{{ channelSyncDetail.toTime }} </ve-cell>
        <!-- 携程同步数据模块 -->
        <view class="status-content" v-for="(item, index) in channelSyncDetail.sourceList" :key="index">
          <view class="title" :class="{ 'bd-line': item && item.syncStatus !== null }">
            <view class="label">
              <p>{{ item.sourceName }}</p>
              <p class="label-code">&nbsp; - &nbsp;{{ item.username }}</p>
            </view>
            <p v-if="item" :class="['statusName__' + item.syncStatus]">
              {{ item.syncStatus !== null ? item.syncStatusName : '-' }}
            </p>
            <p v-else>-</p>
          </view>
          <view v-if="item && item.syncStatus !== null">
            <p v-if="item.syncStatus == 0" class="error-text">原因：{{ item.errorMsg || '-' }}</p>
            <ve-cell v-if="item.channelStore && item.syncStatus !== 0" label="渠道的库存占用">
              <view>
                <p v-for="(i, j) in item.channelStoreList" :key="j">{{ i }}</p>
              </view>
            </ve-cell>
            <ve-cell v-if="item.startTime" label="任务开始时间">{{ item.startTime }}</ve-cell>
            <ve-cell v-if="item.endTime" label="任务结束时间">{{ item.endTime }}</ve-cell>
          </view>
        </view>
      </ve-card>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { getChannelSyncDetail } from '@/api/order/inventory'

  const channelSyncDetail = ref<any>({})

  // 获取费用信息
  const getDetail = (id: number | string) => {
    getChannelSyncDetail({ id: id }).then((res: any) => {
      const result = res.result
      channelSyncDetail.value = result
    })
  }

  onLoad((option: any) => {
    if (option.id) {
      getDetail(option.id)
    }
  })
</script>

<style lang="less" scoped>
  .container {
    height: auto;
    min-height: 100%;
  }

  .info-content {
    padding: 24rpx 24rpx;

    .status-content {
      padding: 0 24rpx 16rpx;
      background: #f7f8fa;
      margin-bottom: 24rpx;
      .title {
        padding: 24rpx 0;
        display: flex;
        justify-content: space-between;
        .label {
          display: flex;
          .label-code {
            overflow: hidden;
            width: 340rpx;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .statusName__0 {
        color: #f53f3f;
      }
      .statusName__1 {
        color: #00b42a;
      }
      .statusName__2 {
        color: #e59b1c;
      }
    }
    .bd-line {
      border-bottom: 2rpx solid rgba(216, 216, 216, 0.6);
    }
    .error-text {
      color: #f53f3f;
      line-height: 44rpx;
      font-size: 30rpx;
      margin: 24rpx 0;
    }
  }
</style>
